<template>
  <page-header-wrapper>
    <a-spin :spinning='spinning' tip='正在加载...' size='large'>
      <a-card :bordered='false' class='bg-content' style='height: calc(100vh - 100px);display: flex'>
        <div class='table-page-search-wrapper'>
          <a-form layout='inline'>
            <a-row :gutter='48'>
              <a-col :md='6' :sm='24'>
                <a-form-item label='时间维度'>
                  <a-select v-model='timeType' style='width: 150px' @change='handleTimeChange'>
                    <a-select-option value='year'>
                      年度查询
                    </a-select-option>
                    <a-select-option value='month'>
                      月度查询
                    </a-select-option>
                    <a-select-option value='day'>
                      日度查询
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md='6' :sm='24'>
                <a-form-item label='起止日期'>
                  <a-range-picker v-model:value='datestr' v-if='timeType === "day"' />
                  <a-range-picker v-model:value='datestr' v-if='timeType === "month"' :mode="['month', 'month']"
                                  @change='handleChange' @panelChange='handlePanelChange2' />
                  <a-range-picker v-model:value='datestr' v-if='timeType === "year"' :mode="['year', 'year']"
                                  @change='handleChange' @panelChange='handlePanelChange2' />
                </a-form-item>
              </a-col>
              <a-col :md='6' :sm='24'>
                <a-form-item label='数据类型'>
                  <a-select v-model='deviceType' style='width: 150px' @change='handleDeviceChange'>
                    <a-select-option v-for='(item,key) in deviceList' :key='item.value'>
                      {{ item.name }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md='6' :sm='24'>
                <a-form-item label='设备编号'>
                  <a-input v-model='deviceId' placeholder='' />
                </a-form-item>
              </a-col>
              <a-col :md='6' :sm='24'>
                <a-button type='primary' @click='handleCheck'>查询</a-button>
                <a-button style='margin-left: 8px' @click='handleCheck("re")'>重置</a-button>
              </a-col>

            </a-row>
          </a-form>
          <a-row :gutter='24'>
            <a-col :span='6'>
              <div class='left-box' style='height:100%;'>
                <div class='w-list'>
                  <p>设备列表</p>
                  <div class='group-box'>
                    <div class='group-list' v-for='(item,index) in deviceGroupList' :key='index'>
                      <div class='group-item'>
                        <div class='group-name'>{{ item.name }}</div>
                        <div class='group-action'>
<!--                          <a-icon type='delete' class='group-action-icon' @click='handleDeleteOk(item.id)' />-->
                        </div>
                      </div>
                      <div class='device-list'>
                        <div class='device-list-item' v-for='(k,d) in item.iotAlarmsList' :key='d'
                             :style="k.equipmentNo === deviceId  ? { background: '#0A5C91' } : { background: 'none '}"
                             @click='changeShow(k)'>
                          <div class='device-name'>{{ k.alarmsName }}</div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class='sorting-pages'>
                    <div class='item' style='margin-right: 5px'>上一页</div>
                    <div class='item'>下一页</div>
                    <!--                    <div class='total'>共123条</div>-->
                  </div>
                </div>
              </div>
            </a-col>
            <a-col :span='18'>
              <div id='myEcharts' ref='myEcharts'
                   style='width:calc(100vw - 544px);height:calc(100vh - 350px)'
              ></div>
            </a-col>
          </a-row>
        </div>
      </a-card>
    </a-spin>
  </page-header-wrapper>
</template>

<script>
import moment from 'moment'
import { STable, Ellipsis } from '@/components'
import { getDeviceCurveStat, getDeviceGroupList, getHistoryList } from '@/api/device'

import StepByStepModal from './modules/StepByStepModal'


const alarmsTypeMap = {
  1: {
    text: '继电器'
  },
  2: {
    text: '太阳能'
  }
}


export default {
  name: 'TableList',
  components: {
    STable,
    Ellipsis,
    StepByStepModal
  },
  data() {
    return {
      spinning: false,
      deviceGroupList: [],
      scrollConfig: {
        x: 'max-content' // 水平滚动，设置为 'max-content' 以适应最大列宽
        // y: 300, // 垂直滚动，设置为具体的像素值，例如 300px  
      },
      // 查询参数
      queryParam: {},
      datestr: '',
      // 加载数据方法 必须为 Promise 对象
      groupList: [],
      timeType: 'day',
      deviceList: [
        {
          name: '太阳能电压',
          value: 'chargingVoltage'
        },
        {
          name: '充电电流',
          value: 'chargingCurrent'
        },
        {
          name: '充电功率',
          value: 'chargingPower'
        },
        {
          name: '太阳能充电量',
          value: 'chargingCapacity'
        },
        {
          name: '电池电压',
          value: 'dischargeVoltage'
        },
        {
          name: '放电电流',
          value: 'dischargeCurrent'
        },
        {
          name: '放电功率',
          value: 'dischargePower'
        },
        {
          name: '环境温度',
          value: 'ambientTemperature'
        },
        {
          name: 'LED电压',
          value: 'ledVoltage'
        },
        {
          name: 'LED电流',
          value: 'ledCurrent'
        },
        {
          name: 'LED功率',
          value: 'ledPower'
        },
        {
          name: '系统温度',
          value: 'innerTemperature'
        },
        {
          name: '路灯电压',
          value: 'streetlightVoltage'
        },
        {
          name: '路灯电流',
          value: 'streetlightCurrent'
        },
        {
          name: '路灯功率',
          value: 'streetlightPower'
        },
        {
          name: '电池容量',
          value: 'dischargeCapacity'
        }
      ],
      deviceUtilEnum: {
        chargingVoltage: ' V',
        chargingCurrent: ' A',
        chargingPower: ' W',
        chargingCapacity: ' kw/h',
        dischargeVoltage: ' V',
        dischargeCurrent: ' A',
        dischargePower: ' W',
        ambientTemperature: ' °C',
        ledVoltage: ' V',
        ledCurrent: ' A',
        ledPower: ' W',
        innerTemperature: ' °C',
        streetlightVoltage: ' V',
        streetlightCurrent: ' A',
        streetlightPower: ' W',
        dischargeCapacity: ''
      },
      deviceNameEnum: {
        chargingVoltage: '太阳能电压',
        chargingCurrent: '充电电流',
        chargingPower: '充电功率',
        chargingCapacity: '太阳能充电量',
        dischargeVoltage: '电池电压',
        dischargeCurrent: '放电电流',
        dischargePower: '放电功率',
        ambientTemperature: '环境温度',
        ledVoltage: 'LED电压',
        ledCurrent: 'LED电流',
        ledPower: 'LED功率',
        innerTemperature: '系统温度',
        streetlightVoltage: '路灯电压',
        streetlightCurrent: '路灯电流',
        streetlightPower: '路灯功率',
        dischargeCapacity: '电池容量'
      },
      deviceType: 'chargingVoltage',
      deviceId: '',
      chartData: []
    }
  },
  mounted() {
    this.initList()
    this.handleCheck()
    this.initCharts()
  },
  created() {
    //   获取头部参数
    console.log(this.$route.query)
    if (this.$route.query?.deviceId) {
      this.deviceId = this.$route.query.deviceId
    }
  },
  methods: {
    handleChange(value) {
      console.log('value', value)
    },
    handlePanelChange2(value, mode) {
      console.log('value', value)
      this.datestr = value
      if (mode[0] === 'month') {
        this.beginDateTime = moment(value[0]).format('YYYY-MM')
        this.endDateTime = moment(value[1]).format('YYYY-MM')
      }
      if (mode[0] === 'year') {
        this.beginDateTime = moment(value[0]).format('YYYY')
        this.endDateTime = moment(value[1]).format('YYYY')
      }

    },
    changeShow(k) {
      console.log(k)
      this.deviceId = k.equipmentNo
      // k.active = !k.active
      this.handleCheck()
    },
    initList() {
      const params = {
        pageNum: 1,
        pageSize: 100
      }
      getDeviceGroupList(params).then(res => {
        console.log(res.data.list)
        res.data.list.forEach((element) => {
          element.isshow = false
        })
        this.deviceGroupList = res.data.list

      })
    },
    handleCheck(type) {
      let beginDateTime = ''
      let endDateTime = ''
      if (type === 're') {
        this.deviceId = ''
        this.timeType = 'day'
        this.deviceType = 'chargingVoltage'
      }
      if (this.datestr.length > 0) {
        beginDateTime = moment(this.datestr[0]).format('YYYY-MM-DD HH:mm:ss')
        endDateTime = moment(this.datestr[1]).format('YYYY-MM-DD HH:mm:ss')
      }
      console.log(beginDateTime)
      console.log(endDateTime)
      const params = {
        equipmentNo: this.deviceId,
        timeType: this.timeType,
        dataType: this.deviceType,
        beginDateTime: beginDateTime,
        endDateTime: endDateTime
      }
      this.spinning = true
      // 查询或者初始化图表
      getDeviceCurveStat(params).then(res => {
        // this.groupList = res.data.list
        console.log('groupList', res.data)
        const arr = []
        res.data.forEach(item => {
          if (this.timeType === 'day') {
            arr.push({
              name: item.time,
              value: item.chargingCapacity
            })
          } else {
            arr.push({
              name: item.time,
              value: item.chargingCapacity
            })
          }
        })
        this.chartData = arr
        this.spinning = false
        this.initCharts()
      })
    },
    initCharts() {
      const { chartData, deviceNameEnum, deviceUtilEnum, deviceType } = this
      let myChart = this.$echarts.init(this.$refs.myEcharts)
      myChart.showLoading()
      const data = chartData

      // 底部立体柱子
      let bottomBar = data.map((item, index) => {
        return {
          value: item.value,
          itemStyle: {
            normal: {
              color: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                type: 'linear',
                global: false,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(23, 131, 246,.7)'
                  },
                  {
                    offset: 0.5,
                    color: 'rgba(8, 97, 131,.7)'
                  },
                  {
                    offset: 0.99,
                    color: 'rgba(3, 57, 110,.7)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(3, 57, 110,0)'
                  }
                ]
              }
            }
          }
        }
      })
      // 中间圆片
      let middleCircle = data.map((item, index) => {
        return {
          name: '',
          value: item.value,
          symbolPosition: 'end',
          symbolSize: item.value === 0 ? 0 : [40, 8], // 当数值为0时，消失
          itemStyle: {
            color: 'rgba(83, 232, 240)'
          }
        }
      })

      let option = option = {
        backgroundColor: '',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            label: {
              backgroundColor: '#6a7985'
            }
          },
          formatter: function(item) {
            return `<div style='position: relative;padding-left:20px'>
                      <div style='position: absolute;left:3px;top:50%;transform: translateY(-50%);width:2px;height:33px;background-color:rgba(28, 205, 255)'></div>
                        ${item[0].name}
                        </br>
                        ${deviceNameEnum[deviceType]}:  ${item[0].value} ${deviceUtilEnum[deviceType]}
                    </div>`
          }
        },
        xAxis: {
          data: data.map(v => v.name),
          type: 'category',
          boundaryGap: true,
          itemStyle: {
            borderColor: 'blue',
            color: '#ffffff'
          },
          axisLabel: {
            textStyle: {
              show: true,
              fontFamily: '微软雅黑',
              // color: '#5DCFF6',
              color: '#fff',

              fontSize: '12'
            }
          }
        },
        yAxis: {
          name: '',
          type: 'value',
          splitLine: {
            show: true,
            lineStyle: {
              // type: 'dashed'
              color: 'rgba(255,255,255,0.2)'
            }
          },
          axisLabel: {
            textStyle: {
              show: true,
              fontFamily: '微软雅黑',
              // color: '#5DCFF6',
              color: '#fff',

              fontSize: '12'
            }

          }
        },
        grid: {
          left: '0%',
          top: '15%',
          right: '0%',
          bottom: '5%',
          containLabel: true
        },
        series: [{
          data: data.map(v => v.value),
          name: '',
          type: 'line',
          // symbol: 'circle',
          symbol: 'emptyCircle',
          smooth: true,
          symbolSize: 7,
          lineStyle: {
            width: 1,
            type: 'solid'
          },
          itemStyle: {
            borderWidth: 1,
            borderColor: '#3f68f8',
            color: '#3F68F8FF'
          },
          areaStyle: {
            color: '#3F68F8FF',
            normal: {
              //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
              color: this.$echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [{
                  offset: 0,
                  // color: 'RGBA(184, 204, 241, 1)'
                  color: '#3F68F8FF'
                },
                  {
                    offset: 0.5,
                    // color: 'RGBA(184, 204, 241, 0.5)'
                    color: '#4d7bbc'
                  },
                  {
                    offset: 1,
                    color: '#0D152F'
                    // color: '#283D46'
                  }
                ],
                false
              ),
              shadowBlur: 0 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
            }
          }
        }]
      }


      // data: data.map(v => v.name)

      myChart.setOption(option)
      myChart.hideLoading()
      window.addEventListener('resize', function() {
        myChart.resize()
      })
    },
    handleTimeChange(value) {
      this.timeType = value
      console.log('timeType', this.timeType)
      this.handleCheck()
    },
    handleDeviceChange(value) {
      console.log('value', value)
      this.deviceType = value
      this.handleCheck()
    },
    handleSub(record) {
      if (record.status !== 0) {
        this.$message.info(`${record.no} 订阅成功`)
      } else {
        this.$message.error(`${record.no} 订阅失败，规则已关闭`)
      }
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    resetSearchForm() {
      this.queryParam = {
        date: moment(new Date())
      }
    }
  }
}
</script>
<style lang='less' scoped>
/deep/ .ant-pro-page-header-wrap-children-content {
  margin: 0 !important;
}

/deep/ .ant-form-item-label > label {
  color: #fff;
}

/deep/ .ant-pro-basicLayout-content {
  margin: 0;
}

/deep/ .ant-layout-footer {
  padding: 0;
}

.bg-content {
  background: url("~@/assets/bgc.png");
  background-size: cover;
}

.extra-wrapper {
  line-height: 55px;
  padding-right: 24px;

  .extra-item {
    display: inline-block;
    margin-right: 24px;

    a {
      margin-left: 24px;
    }
  }
}

.antd-pro-pages-dashboard-analysis-twoColLayout {
  position: relative;
  display: flex;
  display: block;
  flex-flow: row wrap;
}

.antd-pro-pages-dashboard-analysis-salesCard {
  height: calc(100% - 24px);

  :deep(.ant-card-head) {
    position: relative;
  }
}

.dashboard-analysis-iconGroup {
  i {
    margin-left: 16px;
    color: rgba(0, 0, 0, .45);
    cursor: pointer;
    transition: color .32s;
    color: black;
  }
}

.analysis-salesTypeRadio {
  position: absolute;
  right: 54px;
  bottom: 12px;
}

.top {
  height: 100%;
  display: flex;
  justify-content: center;
  padding: 40px 5px;
  background: url("~@/assets/bgc.png");
  background-size: cover;
}

.left-box {
  color: #fff;
}

.w-list {
  padding: 20px;

  p {
    padding: 10px 0;
    cursor: pointer;
  }
}

.w-list-2 {
  color: #fff;
  padding: 20px;
  position: relative;

  .passdateBox {
    position: absolute;
    right: 30px;
  }

  .right-title {
    cursor: pointer;
    margin-bottom: 10px;
  }

  .right-m-20 {
    margin-right: 20px;
  }

  .right-list {
    display: flex;
    flex-wrap: wrap;

    .right-item {
      width: 25%;
      height: 150px;

      .right-center {
        text-align: center;
        margin-bottom: 0;
      }

      .right-img {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px 20px 0;

        p {
          margin: 0;
          cursor: pointer;
        }

        img {
          width: 30px;
          cursor: pointer;
        }
      }
    }
  }
}

.group-box {
  height: 500px;
  overflow-y: scroll;
}

.group-list {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.group-item {
  background-color: #101619;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 5%;
  padding-right: 5%;
  height: 50px;
  border-radius: 5px;

  .group-name {
    font-size: 20px;
    font-weight: bold;
    flex: 1;
    cursor: pointer;
  }

  .group-action {
    .group-action-icon {
      font-size: 20px;
      margin-right: 5px;
    }
  }
}

.device-list {
  color: #fff;
  padding-left: 5%;
  width: 100%;
  margin-bottom: 5px;
  // background-color: #0A5C91;
  .device-list-item {
    display: flex;
    height: 50px;
    align-items: center;
    justify-content: space-between;

    .device-name {
      font-size: 16px;
      margin-left: 10px;
    }

    .jindu {
      margin-left: 10px;
      width: 80px;
      height: 30px;
    }

    // 修改switch的宽高
    .my-switch.ant-switch {
      margin-left: 10px;
      min-width: 50px;
      height: 30px;

      // 修改字体大小
      .ant-switch-inner {
        font-size: 20px;
      }

      // 修改白色圆点大小
      &.ant-switch::after {
        width: 30px;
        height: 20px;
        top: 5px;
      }
    }

  }
}

.ant-switch-checked {
  background-color: #009944;
}

.action {
  display: flex;
  justify-content: flex-start;

  .action-item {
    width: 50%;
  }
}

.sorting-pages {
  margin-top: 40px;
  display: flex;
  justify-content: center;
  align-items: center;

  .item {
    background-color: #003567;
    border: 1px solid #fff;
    width: 80px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .total {
    margin-top: 20px;
  }
}
</style>
